<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="../img/asset-favico.ico">
        <title>传智健康--微信支付页</title>
        <link rel="stylesheet" href="../css/page-health-login.css" />
        <link rel="stylesheet" href="../plugins/elementui/index.css" />
        <!--<link rel="stylesheet" type="text/css" href="../css/webbase.css" />
        <link rel="stylesheet" type="text/css" href="../css/pages-weixinpay.css" />-->
        <script src="../plugins/jquery/dist/jquery.min.js"></script>
        <script src="../plugins/healthmobile.js"></script>
        <script src="../plugins/vue/vue.js"></script>
        <script src="../plugins/vue/axios-0.18.0.js"></script>
        <script src="../plugins/elementui/index.js"></script>
        <script src="../plugins/qrcode.min.js"></script>
        <style>
            .saosao {
                background: url(../img/icon-red.png) 50px 8px no-repeat #ff7674;
                margin-top: 15px;
                padding: 8px 0 8px 125px
            }
            .success-info {
                line-height: 30px;
                vertical-align: top
            }
            .img1{
                margin:0;
                padding:0;
                border:0;
            }
            .checkout-steps {
                border: 1px solid #ddd;
                padding: 25px
            }
        </style>

    </head>
    <body data-spy="scroll" data-target="#myNavbar" data-offset="150">

    <div class="app" id="payVm">
        <!-- 页面头部 -->
        <div class="top-header">
            <span class="f-left"><i class="icon-back"></i></span>
            <span class="center">传智健康</span>
            <span class="f-right"><i class="icon-more"></i></span>
        </div>
        <div><img src="../img/loginLogo.png"></div>
        <div style="margin-left: 150px"><h2>收银台</h2></div>
        <!-- 页面内容 -->
        <div class="contentBox">
            <div class="checkout py-container  pay">
                <div class="checkout-tit">
                    <h4 class="fl tit-txt">
                        <span class="success-icon"></span>
                        <span class="success-info">订单提交成功，请您及时付款！<br/>订单号：<font color="red">{{orderNumber}}</font></span>
                    </h4>
                    <span>
						<em class="sui-lead">应付金额：</em>
						<em class="orange money">￥<font style="color: red">{{setMealPrice}}</font></em>元</span>

                </div>
                <div class="checkout-steps" >
                    <div class="fl weixin">微信支付</div>
                    <div class="fl sao">
                        <p style="color: red" id="rs" @click="reseterweima()">如果二维码过期，刷新页面重新获取二维码。</p>
                        <div>
                            <!--<img src="../img/erweima.png" alt=""  width="250px" height="300px">-->
                            <div id="qrImage"></div>
                            <div class="saosao">
                                <p >请使用微信扫一扫</p>
                                <p >扫描二维码支付</p>
                            </div>
                        </div>

                    </div>

                </div>
            </div>


        </div>
    </div>
    </body>
    <script>
        var payVm = new Vue({
            el:"#payVm",
            data:{
                orderNumber:"",// 订单编号
                orderId:0,// 订单id
                setMealPrice:0 //套餐价格
            },
            created(){
                let orderId=getUrlParam("orderId");
                let orderNumber=getUrlParam("orderNumber");
                let setMealPrice=getUrlParam("setMealPrice");
                    // 获取订单编号
                    this.orderId = orderId;
                    this.orderNumber = orderNumber;
                    this.setMealPrice=setMealPrice;
                axios.get("/order/url.do?orderNumber="+this.orderNumber+"&setMealPrice="+this.setMealPrice).then(resp => {
                        new QRCode(document.getElementById("qrImage"), {
                            text: resp.data.data,
                            width: 250,
                            height: 250,
                            colorDark: "#000000",
                            colorLight: "#ffffff",
                            correctLevel: QRCode.CorrectLevel.H
                        });
                    });
                //查询付款状态
                axios.get("/order/queryPayStatus.do?orderNumber="+this.orderNumber).then((res)=>{
                    console.log(res.data);
                   if (res.data.flag) {
                       location.href = "/pages/paysuccess.html?orderNumber="+ this.orderNumber;
                   }else {
                       location.href = "/pages/payfail.html";
                   }
               })
            },

                methods:{
                    //刷新二维码
                    reseterweima(){
                        axios.get("/order/url.do?orderNumber="+this.orderNumber+"&setMealPrice="+this.setMealPrice).then(resp => {
                            new QRCode(document.getElementById("qrImage"), {
                                text: resp.data.data,
                                width: 250,
                                height: 250,
                                colorDark: "#000000",
                                colorLight: "#ffffff",
                                correctLevel: QRCode.CorrectLevel.H
                            });
                        });
                    }

                }
            /*components: {
                shortcut: () => import("./js/pages/shortcut.js")
            }*/
        });


    </script>
</html>